<script setup>
import {ref} from "vue";
import {ElMessage} from "element-plus";
import {userRegisterService} from "@/api/user.js";

const username = ref('')
const password = ref('')
const password2 = ref('')

import Router from "@/router/index.js";

function registerButton() {
  if (username.value.trim() === '' || password.value.trim() === ''
      || password2.value.trim() === '') {
    ElMessage.error("用户名或密码不能为空")
    return
  }
  if (password.value !== password2.value ){
    ElMessage.error("两次密码不一致")
    return
  }
  // 注册逻辑
  const registerResp = userRegisterService(username.value.trim(), password.value.trim());
  registerResp.then(data => {
    if (data.code === 1) {
      //注册成功
      ElMessage.success(username.value.trim() + "注册成功！" )
      Router.push('/login')
    } else ElMessage.error(data.msg)

  }).catch(err => {
    ElMessage.error("网络错误")
  })
}


</script>

<template>

  <div style="width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center">
    <img src="@/assets/img/a3.jpg"
         style="background-color: green;width: 100%;height: 100vh;display: flex;align-items: center;justify-content: center;z-index: -1;position: absolute">

    <div style="display: flex;width: 37%;background-color: white;border-radius: 10px;overflow: hidden">
      <div style="flex: 1">
        <img src="@/assets/img/a2.webp" style="width: 100%;height: 100%; opacity: 0.5;">

      </div>
      <div style="flex: 1.8;display: flex;align-items: center;justify-content: center">
        <el-form style="width: 60%">
          <div style="font-size: 18px;color: black;font-weight: bold;text-align: center;margin-bottom: 20px">
            小张水果店
          </div>

          <el-from-item>
            <div style="margin-bottom: 10px;">
              <el-input v-model="username" prefix-icon="el-icon-user" size="small" placeholder="请输入账号"></el-input>
            </div>
          </el-from-item>

          <el-from-item prop="password">
            <div style="margin-bottom: 10px;">
              <el-input v-model="password" prefix-icon="el-icon-lock" size="small" show-password
                        placeholder="请输入密码"></el-input>
            </div>
          </el-from-item>

          <el-from-item prop="password">
            <div style="margin-bottom: 10px;">
              <el-input v-model="password2" prefix-icon="el-icon-lock" size="small" show-password
                        placeholder="确认密码"></el-input>
            </div>
          </el-from-item>


          <div>
            <el-form-item style=" margin-top: 5px">
              <el-button @click="registerButton" type="primary" round style="width: 100%">注册</el-button>
            </el-form-item>
            <div style="display: flex">
              <div style="flex: 1.2px; color: #000c17;font-size: 13px ">已有账号?<span
                  style="color: red ;font-size: 12px; cursor: pointer">
                <router-link to="/login"><span style="color: red">去登录</span></router-link>

              </span></div>

            </div>
          </div>


        </el-form>
      </div>
    </div>

  </div>


  <!--    <div class="login-container" style="position: absolute">-->
  <!--    <el-form label-width="80px">-->
  <!--      <el-form-item label="用户名" prop="username">-->
  <!--        <el-input v-model="username"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item label="密码" prop="password">-->
  <!--        <el-input type="password"  v-model="password"></el-input>-->
  <!--      </el-form-item>-->
  <!--      <el-form-item>-->
  <!--        <el-button type="primary"  ..click="loginButton">登录</el-button>-->
  <!--      </el-form-item>-->
  <!--    </el-form>-->
  <!--  </div>-->
</template>

<style scoped>

</style>